V = [];
{
const height = "300px";
const container = d3.create("div").style("position", "relative");
let svg = container
.append("svg")
.attr("class", "canvas")
.style("margin-left", "15px")
.style("width", "90%")
.style("height", height)
.style("border", "0.5px solid #eee");
const triangles = svg.append("g").attr("class", "triangles");
const edges = svg.append("g").attr("class", "edges");
const vertices = svg.append("g").attr("class", "vertices");
// scale
container
.append("div")
.style("width", "15px")
.style("height", height)
.style("background", "#eee")
.style("position", "absolute")
.style("top", "0")
.style("bottom", "0")
.append("div")
.style("width", "100%")
.style("height", scale + "px")
.style("background", "steelblue");
container
.append("div")
.style("margin-left", "3px")
.style("width", height)
.style("display", "inline-block")
.style("text-align", "center")
.style("transform", "rotate(-90deg)")
.style("transform-origin", "top left")
.html(tex`\epsilon`.outerHTML);
drawRips(svg, sc.rips(V, scale, 2));
svg.on("click", (e) => {
const coord = d3.pointer(e);
V.push(coord);
drawRips(svg, sc.rips(V, scale, 2));
});
return container.node();
}